<template>
<div class="page login-page">
  <img class="bg" src="//img.dmallcdn.com//dshop/201912/13b7b397-1d7b-4fda-80df-1c4030410765" />
    <md-Form :mode="this.formData" class="form-box">
      <md-form-item title="手机号" type="text" v-model="formData.phone" class="phone">
       <md-button
          v-if="endTime"
          type="primary"
          class="msg-btn"
          disabled
          plain
          inline
        >
         {{time}}秒后重新获取
      </md-button>
          <md-button
          v-else
          type="primary"
          class="msg-btn"
          :disabled="isDisabled"
          plain
          inline
          @click="sendMessageCode"
        >获取验证码</md-button>
      </md-form-item>
      
      <md-form-item title="验证码" type="text" class="msgcode"></md-form-item>
    </md-Form>
     <p class="tip">
       验证手机视为已阅读<br/>
       <a href="">《超市用户协议》</a>
       <a href="">《超市隐私政策》</a>
     </p>
    <md-button type="primary" @click="start" class="submit-btn">登陆</md-button>
</div>
</template>

<script>
//import axios from 'axios'
export default {
data() {
    return {
      endTime:false,
        formData:{
          phone:'',
          msgCode:''
        }
    }
},
computed:{
  isDisabled(){
    const reg=/^1[3456789]\d{9}$/
    console.log(reg.test(this.formData.phone))
    return !reg.test(this.formData.phone)
  }
},
 methods: {
    start(){
      console.log('aaa')
      this.$router.push('/home')
    },
    startEndTime(){
      this.endTime=true
      this.time=10
      this.inerval=setInterval(()=>{
        this.time-=1
        if(this.time<0){
          clearInterval(this.inerval)
        }
      },1000)
    },
  sendMessageCode(){
    this.$api.user.message_code({
      phone:this.formData.phone
    }).then((res)=>{
      console.log(res)
    })
  },
  loginDo(){
    this.$api.user.login(this.formData).then((res)=>{
      console.log(res)
      const path =this.$route.query.callbackUrl|| '/home'
      this.$route.replace(path)
    }).catch((error)=>{
      console.log(error)
    })
  }   
 }
}
</script>

<style lang='scss' scoped>
  .login-page {
    background: #f6f6f6;
    .bg {
    @include wh(100%, auto);
    display: block;
  }
   .form-box{
     margin-top: 20px;
  }
  .phone{
    display: flex;
  }
  .msg-btn {
    flex-shrink: 0;
    font-size: $font-size-s;
    width: 150px;
    height: 40px;
  }
   .msgcode{
     margin-top: 55px;
   }
   .tip{
     line-height: 1.5;
     font-size: $font-size-s;
     color:$text-default-color;
     text-align: 20px 0;
     a{
       color: $base-color;
     }
   }
   .submit-btn{
     color:$base-background-color;
   }
   
  }
  
</style>